<!-- #layout name=blank -->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Disk</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="row block-dashboard-stat">
    <div class="col-sm-12 col-md-3">
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Total size</h3>
            </div>
            <div class="panel-body">
              <div class="item">
                <div class="number">
                  {{ totalSize }}
                  <!-- <div class="btn-group pull-right">
                                    <button type="button" class="btn btn-info" @click="clearLogs"">Clear logs</button>
                                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="javascript:;" @click="clearRepository">Clear system log</a></li>
                                        <li><a href="javascript:;" @click="clearVistorLog">Clear vistor log</a></li>
                                    </ul>
                                </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Top 5</h3>
            </div>
            <div class="panel-body">
              <template v-for="($data, $index) in topThreeArray">
                <div class="item">
                  <div class="number">{{ $data.size }}</div>
                  <small class="text-muted">{{ $data.name }}</small>
                </div>
                <hr v-if="$index !== topThreeArray.length - 1" />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-9 hidden-xs hidden-sm">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Chart</h3>
        </div>
        <div class="panel-body">
          <div class="item">
            <div class="row" id="chart" style="height: 510px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Detail</h3>
    </div>
    <div class="panel-body">
      <div class="row item" style="margin-top: -15px;">
        <kb-table :data="tableData" style="margin-bottom: -15px;">
          <kb-table-column
            :label="Kooboo.text.common.name"
            prop="name"
          ></kb-table-column>
          <kb-table-column :label="Kooboo.text.site.disk.count">
            <template v-slot="row">
              <span class="badge" :class="row.itemCount.class">{{
                row.itemCount.text
              }}</span>
            </template>
          </kb-table-column>
          <kb-table-column
            :label="Kooboo.text.common.size"
            prop="size"
          ></kb-table-column>
          <kb-table-column head-class="table-action" body-class="table-action" colspan="1">
            <template v-slot="row">
              <a
                @click.prevent="showLog(row)"
                class="btn btn-sm"
                :class="[row.log.class ? row.log.class : 'blue']"
                >{{ row.log.text }}</a
              >
            </template>
          </kb-table-column>
        </kb-table>
      </div>
    </div>
  </div>
  <div
    class="modal fade"
    v-kb-modal="showLogModal"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog" v-if="logData && logData.name">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onHideLogModal">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">{{ logData.name }}</h4>
        </div>
        <div class="modal-body">
          <table class="table table-striped" style="margin-bottom: 0;">
            <tr>
              <th>Disk size</th>
              <th>Item size</th>
              <th>Item count</th>
              <th>Log count</th>
            </tr>
            <tr>
              <td>{{ logData.diskSize }}</td>
              <td>{{ logData.itemSize }}</td>
              <td>{{ logData.itemCount }}</td>
              <td>{{ logData.logCount }}</td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">
          <button class="btn gray" @click="onHideLogModal">
            Cancel
          </button>
          <button v-if="logData.canClean" class="btn green" @click="onCleanLog"
            >Clean</button
          >
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/lib/echarts.min.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/lib/jquery-ui-customized.js"
    ]);
  })();
</script>
<script src="/_Admin/View/System/Disk.js"></script>
